<template>
  <div class="dataScreen-container">
    <div class="dataScreen-content" ref="dataScreenRef">
      <!-- 头部 -->
      <div
        class="head flex justify-between items-start pt-[10px] box-border px-[45px]"
      >
        <div class="left flex justify-start">
          <div class="bg" @click="changerules('/')">挂图首页</div>
          <div class="bg ml-5">查询统计</div>
          <div class="bg-select ml-5" @click="changerules('/jstzk')">
            建设投资
          </div>
          <div class="bg ml-5" @click="changerules('/gongdiku')">供地库</div>
        </div>
        <div class="right flex justify-end">
          <div class="bg mr-5" @click="changerules('/lixiangku')">立项库</div>
          <div class="bg mr-5">投资进度</div>
          <div class="bg">开工竣工</div>
        </div>
      </div>
      <div class="timeandtq">
        <el-date-picker
          v-model="selectedYear"
          type="year"
          :clearable="false"
          :editable="false"
        />
      </div>
      <!-- 切换按钮 -->
      <div class="headButton">
        <div
          class="button"
          :class="changeButton ? 'select' : 'unselect'"
          @click="clickButton(true)"
        >
          重点项目进展情况
        </div>
        <div
          class="button"
          :class="!changeButton ? 'select' : 'unselect'"
          @click="clickButton(false)"
        >
          策划储备项目情况
        </div>
      </div>
      <!-- body主体 -->
      <div class="body" v-if="changeButton">
        <div class="left px-[26px] py-[17px] anmin">
          <imgleft message="项目投资情况" />
          <div class="left-top">
            <div class="top flex justify-center items-center gap-4 mt-4">
              <div class="line-clamp-1">计划投资总额(万元)</div>
              <div class="line-clamp-1">投资总额(万元)</div>
            </div>
            <div class="bottom flex justify-center items-center gap-4 mt-4">
              <div class="line-clamp-1 text-[#4DE4FF] text-[34px]">13455</div>
              <div class="line-clamp-1 text-[#369EFF] text-[34px]">2344</div>
            </div>
          </div>
          <div class="left-bottom">
            <div class="item">
              <titleimg title="项目性质分析"></titleimg>
              <div id="echart1" v-if="changeButton"></div>
            </div>
            <div class="item">
              <titleimg title="项目投资数据分析"></titleimg>
              <div class="leftchange">
                <div
                  class="buttonltem"
                  :class="zdxmjz == 1 ? 'select' : 'unselect'"
                  @click="changezdxmjz(1)"
                >
                  续建项目
                </div>
                <div
                  class="buttonltem"
                  :class="zdxmjz == 2 ? 'select' : 'unselect'"
                  @click="changezdxmjz(2)"
                >
                  拟开工项目
                </div>
                <div
                  class="buttonltem"
                  :class="zdxmjz == 3 ? 'select' : 'unselect'"
                  @click="changezdxmjz(3)"
                >
                  争取开工项目
                </div>
              </div>
              <div id="echart2" v-if="changeButton"></div>
            </div>
          </div>
        </div>
        <div class="center">
          <div class="centertop">
            <div class="centertop-top">
              <div class="centertop-top-item">
                <div class="linecenter one text-[24px]">项目总投资</div>
                <div class="linecenter two text-[48px] text-[#4DE4FF]">
                  11870
                </div>
                <div class="linecenter three text-[48px] text-[#4DE4FF]">
                  86
                </div>
                <div class="linecenter four text-[20px] text-[#4DE4FF]">
                  万元
                </div>
              </div>
            </div>
            <div class="centertop-center">
              <div class="item">
                <div class="text-[16px] px-3">年计划投资</div>
                <div class="text-[#4DE4FF] text-[40px] px-20">
                  821.99
                  <span class="text-[#00A3FF] text-[18px]">万元</span>
                </div>
              </div>
              <div class="item">
                <div class="text-[16px] px-0">当前累计完成投资</div>
                <div class="text-[#4DE4FF] text-[40px] px-20">
                  821.99
                  <span class="text-[#00A3FF] text-[18px]">万元</span>
                </div>
              </div>
            </div>
            <div class="centertop-bottom">
              <div class="item">
                <div class="itemflex">
                  当前累计完成投资率:
                  <div class="flex">
                    <span
                      class="text-[#BFE7F9] text-[24px] w-20 block text-left"
                      >86.00</span
                    >
                    <span class="text-[#BFE7F9] text-[24px]">%</span>
                  </div>
                </div>
                <div class="itemflex">
                  预计完成投资率:
                  <div class="flex">
                    <span
                      class="text-[#BFE7F9] text-[24px] w-20 block text-left"
                      >86.00</span
                    >
                    <span class="text-[#BFE7F9] text-[24px]">%</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="itemflex">
                  预计完成投资
                  <div class="flex">
                    <span
                      class="text-[#BFE7F9] text-[24px] w-20 block text-left"
                      >86.00</span
                    >
                    <span class="text-[#BFE7F9] text-[24px]">%</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="centerbottom mt-4">
            <div class="bottomtop text-center text-[24px]">数据总览</div>
            <bottomtable :bottomdata="bottomdata"></bottomtable>
          </div>
        </div>
        <div class="right anmin">
          <imgleft message="项目投资情况" class="px-[26px] pt-[17px]" />
          <zdxmrighttable class="rightitem" />
        </div>
      </div>
      <!-- 建设body -->
      <div class="jsbody" v-else>
        <div class="left px-[26px] py-[17px] anmin">
          <div class="itemtop">
            <imgleft message="项目所属阶段分析" />
            <div id="echarts3" v-if="!changeButton"></div>
          </div>
          <div class="itembottom">
            <imgleft message="项目所属阶段分析" />
            <div id="echarts4" v-if="!changeButton"></div>
          </div>
        </div>
        <div class="center">
          <div class="centertop">
            <div class="item bg1">
              <div class="text-[20px]">823.2</div>
              <div>万元</div>
              <div class="bottom">总投资</div>
            </div>
            <div class="item bg2">
              <div class="text-[20px]">523.2</div>
              <div>万元</div>
              <div class="bottom">累计完成投资</div>
            </div>
            <div class="item bg1">
              <div class="text-[20px]">457.2</div>
              <div>万元</div>
              <div class="bottom">2024年度计划投资</div>
            </div>
            <div class="item bg2">
              <div class="text-[20px]">623.5</div>
              <div>万元</div>
              <div class="bottom">2025年度计划投资</div>
            </div>
          </div>
          <div class="centerbottom">
            <jstzkjsbottomtable :bottomdata="bottomdata" />
          </div>
        </div>
        <div class="right anmin">
          <imgleft message="项目类别分析情况" class="px-[26px] pt-[17px]" />
          <jstzkjsrightbotton />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted, onBeforeUnmount } from "vue";
import zdxmrighttable from "@/components/jstzk-component/zdxmrighttable.vue";
import jstzkjsbottomtable from "@/components/jstzk-component/jstzk-js-center-table.vue";
import imgleft from "@/components/vue/imgleft.vue";
import titleimg from "@/components/vue/titleimg.vue";
import bottomtable from "@/components/jstzk-component/jstzk-bottomtable.vue";
import jstzkjsrightbotton from "@/components/jstzk-component/jstzk-js-right-table.vue";
import { useRouter } from "vue-router";
import { ElDatePicker } from "element-plus";
import { getechartsnum } from "@/script/utill";

const router = useRouter();

const changerules = (url) => {
  router.push(url);
};
let selectedYear = ref(new Date().getFullYear().toString());

const dataScreenRef = ref<HTMLElement | null>(null);
let changeButton = ref<boolean>(true);
let zdxmjz = ref<number>(1);
const changezdxmjz = (res) => {
  zdxmjz.value = res;
  if (zdxmjz.value == 1) {
    let data3 = getechartsnum(["112", "97", "125"], 4);
    let data4 = getechartsnum(["125", "97", "112"], 4);
    let data5 = getechartsnum(["86", "95", "18"], 4);
    let data6 = getechartsnum(["18", "95", "86"], 4);
    let yAxis = getechartsnum(["112", "97", "125"], 4);
    echarts2(data3, data4, data5, data6, yAxis);
  } else if (zdxmjz.value == 2) {
    let data3 = getechartsnum(["92", "77", "105"], 4);
    let data4 = getechartsnum(["105", "77", "92"], 4);
    let data5 = getechartsnum(["66", "75", "28"], 4);
    let data6 = getechartsnum(["28", "75", "66"], 4);
    let yAxis = getechartsnum(["112", "97", "125"], 4);

    echarts2(data3, data4, data5, data6, yAxis);
  } else if (zdxmjz.value == 3) {
    let data3 = getechartsnum(["72", "57", "85"], 4);
    let data4 = getechartsnum(["85", "57", "72"], 4);
    let data5 = getechartsnum(["46", "55", "8"], 4);
    let data6 = getechartsnum(["8", "55", "46"], 4);
    let yAxis = getechartsnum(["112", "97", "125"], 4);

    echarts2(data3, data4, data5, data6, yAxis);
  }
};
const clickButton = (res) => {
  changeButton.value = res;
  if (changeButton.value) {
    zdxmjz.value = 1;
    setTimeout(() => {
      let data1 = getechartsnum(["12", "7", "25"], 4);
      let data2 = getechartsnum(["25", "7", "12"], 4);
      echarts1(data1, data2);
      let data3 = getechartsnum(["112", "97", "125"], 4);
      let data4 = getechartsnum(["125", "97", "112"], 4);
      let data5 = getechartsnum(["86", "95", "18"], 4);
      let data6 = getechartsnum(["18", "95", "86"], 4);
      let yAxis = getechartsnum(["112", "97", "125"], 4);
      echarts2(data3, data4, data5, data6);
    }, 50);
  } else {
    setTimeout(() => {
      echarts3();
      echarts4();
    }, 50);
  }
};
const bottomdata = ref([
  {
    zth: "项目名称",
    xmm: "实施单位",
    jbnr: "责任单位",
    hyfl: "包挂领导",
    gjys: "建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容",
    xmlx: "项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划",
    tjqk: "目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况",
  },
  {
    zth: "项目名称",
    xmm: "实施单位",
    jbnr: "责任单位",
    hyfl: "包挂领导",
    gjys: "建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容",
    xmlx: "项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划",
    tjqk: "目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况",
  },
  {
    zth: "项目名称",
    xmm: "实施单位",
    jbnr: "责任单位",
    hyfl: "包挂领导",
    gjys: "建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容",
    xmlx: "项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划",
    tjqk: "目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况",
  },
  {
    zth: "项目名称",
    xmm: "实施单位",
    jbnr: "责任单位",
    hyfl: "包挂领导",
    gjys: "建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容",
    xmlx: "项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划",
    tjqk: "目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况",
  },
  {
    zth: "项目名称",
    xmm: "实施单位",
    jbnr: "责任单位",
    hyfl: "包挂领导",
    gjys: "建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容",
    xmlx: "项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划",
    tjqk: "目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况",
  },
  {
    zth: "项目名称",
    xmm: "实施单位",
    jbnr: "责任单位",
    hyfl: "包挂领导",
    gjys: "建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容",
    xmlx: "项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划",
    tjqk: "目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况",
  },
  {
    zth: "项目名称",
    xmm: "实施单位",
    jbnr: "责任单位",
    hyfl: "包挂领导",
    gjys: "建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容",
    xmlx: "项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划",
    tjqk: "目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况",
  },
  {
    zth: "项目名称",
    xmm: "实施单位",
    jbnr: "责任单位",
    hyfl: "包挂领导",
    gjys: "建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容",
    xmlx: "项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划",
    tjqk: "目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况",
  },
  {
    zth: "项目名称",
    xmm: "实施单位",
    jbnr: "责任单位",
    hyfl: "包挂领导",
    gjys: "建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容",
    xmlx: "项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划",
    tjqk: "目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况",
  },
  {
    zth: "项目名称",
    xmm: "实施单位",
    jbnr: "责任单位",
    hyfl: "包挂领导",
    gjys: "建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容建设内容",
    xmlx: "项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划项目推进计划",
    tjqk: "目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况目前项目推进情况",
  },
]);
onMounted(() => {
  setTimeout(() => {
    if (changeButton.value) {
      let data1 = getechartsnum(["12", "7", "25"], 4);
      let data2 = getechartsnum(["25", "7", "12"], 4);
      echarts1(data1, data2);
      let data3 = getechartsnum(["112", "97", "125"], 4);
      let data4 = getechartsnum(["125", "97", "112"], 4);
      let data5 = getechartsnum(["86", "95", "18"], 4);
      let data6 = getechartsnum(["18", "95", "86"], 4);
      echarts2(data3, data4, data5, data6);
    } else {
      echarts3();
      echarts4();
    }
  }, 50);

  if (dataScreenRef.value) {
    setTimeout(() => {
      dataScreenRef.value.style.transition = `all 0.5s ease`;
    }, 100);
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    dataScreenRef.value.style.width = `1920px`;
    dataScreenRef.value.style.height = `1080px`;
  }
  window.addEventListener("resize", resize);
});

const resize = () => {
  if (dataScreenRef.value) {
    dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
  }
};


const getScale = (width = 1920, height = 1080) => {
  let ww = window.innerWidth / width;
  let wh = window.innerHeight / height;
  return ww < wh ? ww : wh;
};
//echart组件1
const echarts1 = (data1, data2) => {
  var chartDom = document.getElementById("echart1");
  var myChart = echarts.init(chartDom);

  const option = {
    color: "#fff",
    tooltip: {
      trigger: "axis",
      show: true,
      showContent: true,
    },

    legend: {
      data: ["总投资", "年度计划投资"],
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        data: ["续建", "拟开工", "项目总数"],
        axisPointer: {
          type: "shadow",
        },
        axisLine: {
          lineStyle: {
            //改变xy轴线条的颜色
            color: "#FFF",
            width: 1, //这里是为了突出显示加上的
          },
        },
        axisLabel: {
          textStyle: {
            //改变xy轴上文字的颜色
            color: "#FFF",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位(亿)",
        min: 0,
        max: data1.maxnum * data1.interval,
        interval: data1.maxnum,
        axisLine: {
          lineStyle: {
            //改变xy轴线条的颜色
            color: "#FFF",
            width: 1, //这里是为了突出显示加上的
          },
        },
        axisLabel: {
          textStyle: {
            //改变xy轴上文字的颜色
            color: "#FFF",
          },
        },
      },
    ],
    grid: {
      x: 40,
      y: 40,
      x2: 0,
      y2: 40,
    },
    series: [
      {
        name: "总投资",
        type: "bar",
        data: data2.data,
        barWidth: 20,
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#4BDCF7",
            },
            {
              offset: 1,
              color: "#0C2047",
            },
          ]),
        },
      },
      {
        name: "年度计划投资",
        type: "bar",
        data: data1.data,
        barWidth: 20,
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#3599F8",
            },
            {
              offset: 1,
              color: "#0C2047",
            },
          ]),
        },
      },
    ],
  };
  option && myChart.setOption(option);
};
//echart组件2
const echarts2 = (data1, data2, data3, data4, yAxis = data1) => {
  var chartDom = document.getElementById("echart2");
  var myChart = echarts.init(chartDom);

  const option = {
    tooltip: {
      trigger: "axis",
    },
    toolbox: {
      feature: {},
    },
    legend: {
      data: [
        "预计完成投资",
        "当月累计完成投资",
        "预计完成投资率",
        "当月完成投资率",
      ],
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        data: ["续建", "拟开工", "项目总数"],
        axisPointer: {
          type: "shadow",
        },
        axisLine: {
          lineStyle: {
            //改变xy轴线条的颜色
            color: "#FFF",
            width: 1, //这里是为了突出显示加上的
          },
        },
        axisLabel: {
          textStyle: {
            //改变xy轴上文字的颜色
            color: "#FFF",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位(亿)",
        min: 0,
        max: yAxis.maxnum * yAxis.interval,
        interval: yAxis.maxnum,
        axisLine: {
          lineStyle: {
            //改变xy轴线条的颜色
            color: "#FFF",
            width: 1, //这里是为了突出显示加上的
          },
        },
        axisLabel: {
          textStyle: {
            //改变xy轴上文字的颜色
            color: "#FFF",
          },
        },
      },
      {
        type: "value",
        name: "",
        min: 0,
        max: 100,
        interval: 25,
        hide: false,
        axisLine: {
          lineStyle: {
            //改变xy轴线条的颜色
            color: "#FFF",
            width: 1, //这里是为了突出显示加上的
          },
        },
        axisLabel: {
          textStyle: {
            //改变xy轴上文字的颜色
            color: "#FFF",
          },
          formatter: "{value} %",
        },
      },
    ],
    grid: {
      x: 40,
      y: 90,
      x2: 45,
      y2: 40,
    },
    series: [
      {
        name: "预计完成投资",
        type: "bar",
        data: data1.data,
        barWidth: 20,
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#4BDCF7",
            },
            {
              offset: 1,
              color: "#0C2047",
            },
          ]),
        },
      },
      {
        name: "当月累计完成投资",
        type: "bar",
        data: data2.data,
        barWidth: 20,
        itemStyle: {
          barBorderRadius: [0, 0, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#3599F8",
            },
            {
              offset: 1,
              color: "#0C2047",
            },
          ]),
        },
      },
      {
        name: "预计完成投资率",
        type: "line",
        data: data3.data,
        yAxisIndex: 1,
      },
      {
        name: "当月完成投资率",
        type: "line",
        data: data4.data,
        yAxisIndex: 1,
      },
    ],
  };

  option && myChart.setOption(option);
};
//echarts组件3
const echarts3 = () => {
  var chartDom = document.getElementById("echarts3");
  var myChart = echarts.init(chartDom);
  const option = {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "4.5%",
      bottom: "3%",
      top: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLabel: {
        rotate: 0, // 设置标签倾斜角度，单位为度
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
    },
    yAxis: {
      type: "category",
      data: [
        "无影山街道",
        "天桥东街街道",
        "工人新村北村街道",
        "工人新村南村街道",
        "堤口路街道",
        "北坦街道",
        "制锦式街道",
        "宝华街道",
        "官扎营街道",
        "纬北路街道",
        "药山街道",
        "北园街道",
        "泺口街道",
        "桑梓店街道",
        "大桥街道",
      ],
      axisLabel: {
        rotate: 0, // 设置标签倾斜角度，单位为度
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        data: [
          "123",
          "485",
          "345",
          "215",
          "567",
          "452",
          "789",
          "890",
          "901",
          "122",
          "948",
          "234",
          "566",
          "354",
          "481",
        ],
        barWidth: 18,

        itemStyle: {
          barBorderRadius: [0, 0, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#1B63CC",
            },
            {
              offset: 1,
              color: "#03DFFC",
            },
          ]),
        },
      },
    ],
  };

  option && myChart.setOption(option);
};
//echarts组件4
const echarts4 = () => {
  var chartDom4 = document.getElementById("echarts4");
  var myChart = echarts.init(chartDom4);
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: {
      type: "category",
      data: ["开工建设阶段", "手续办理阶段", "研究论证阶段"],
      line: {
        show: false,
      },
      axisLabel: {
        rotate: 0, // 设置标签倾斜角度，单位为度
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
    },
    yAxis: {
      name: "单位(个)",
      type: "value",
      line: {
        show: false,
      },
      splitLine: {
        //网格线
        lineStyle: {
          type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
          color: "#ccc", //颜色
        },

        show: true, //隐藏或显示
      },
      axisLabel: {
        rotate: 0, // 设置标签倾斜角度，单位为度
        textStyle: {
          color: "#fff", //坐标的字体颜色
        },
      },
      axisLine: {
        lineStyle: {
          //改变xy轴线条的颜色
          color: "#FFF",
          width: 1, //这里是为了突出显示加上的
        },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "10%",
      containLabel: true,
    },
    series: [
      {
        data: [120, 189, 150],
        type: "bar",
        barWidth: 20,

        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        itemStyle: {
          barBorderRadius: [15, 15, 0, 0], //柱体圆角
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#1B63CC",
            },
            {
              offset: 1,
              color: "#03DFFC",
            },
          ]),
        },
      },
    ],
  };

  option && myChart.setOption(option);
};
</script>
<style scoped lang="scss">
.dataScreen-container {
  width: 100%;
  // height: 100%;

  .dataScreen-content {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: left top;
    .head {
      background-image: url("@/assets/images/headimg.png");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 100% 100%;
      min-height: 75px;
      width: 100%;
      .bg-select {
        color: #00ffff;
        width: 132px;
        height: 48px;
        background-image: url("@/assets/images/indexheadselect.png");
        background-position: 50% 50%;
        background-size: 100% 100%;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        transform: translateY(-10px);
      }
      .bg {
        color: #00ffff;
        width: 132px;
        height: 48px;
        background-image: url("@/assets/images/indexunselect.png");
        background-position: 50% 50%;
        background-size: 100% 100%;
        line-height: 48px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
        transform: translateY(-10px);
      }
    }
    .headButton {
      padding-left: 230px;
      display: flex;
      justify-content: left;
      transform: translateY(-8px);
      gap: 20px;
      .button {
        width: 170px;
        height: 34px;
        background-position: 50% 50%;
        background-size: 100% 100%;
        line-height: 34px;
        text-align: center;
        font-size: 14px;
        cursor: pointer;
      }
      .select {
        background-image: url("@/assets/images/changbuttonselect.png");
      }
      .unselect {
        background-image: url("@/assets/images/chengButton.png");
      }
    }
  }
}
.body {
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  box-sizing: border-box;
  padding: 10px 20px 20px 20px;
  display: flex;
  justify-content: center;
  gap: 20px;

  .left {
    width: 22%;
    height: 100%;
    box-sizing: border-box;
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("@/assets/images/indexbg1.png");
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .left-top {
      .top {
        div {
          background-image: url("@/assets/images/indeximg3.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 100%;
          height: 54.29px;
          text-align: center;
          line-height: 54.29px;
          color: #fff;
        }
      }
      .bottom {
        div {
          background-image: url("@/assets/images/indeximg6.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 100%;
          height: 70.74px;
          text-align: center;
          line-height: 70.74px;
        }
      }
    }
    .left-bottom {
      flex: 1;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      .item {
        height: 50%;
        display: flex;
        flex-direction: column;
      }
      .leftchange {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .buttonltem {
          background-size: 100% 100%;
          width: 100px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 12px;
          cursor: pointer;
        }
        .select {
          background-image: url("@/assets/images/changbuttonselect.png");
        }
        .unselect {
          background-image: url("@/assets/images/chengButton.png");
        }
      }
      #echart1 {
        width: 100%;
        flex: 1;
        // border: 1px solid red;
      }
      #echart2 {
        width: 100%;
        flex: 1;
        margin-top: 10px;
        // border: 1px solid red;
      }
    }
  }
  .right {
    width: 22%;
    height: 100%;
    box-sizing: border-box;
    background-image: url("@/assets/images/indexbg1.png");
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .rightitem {
      flex: 1;
      // border: 1px solid red;
    }
  }
  .center {
    width: 56%;
    height: 100%;
    // border: 1px solid red;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .centertop {
      height: 300px;
      background-image: url("@/assets/images/jstzk-tz-top.png");
      background-position: 50% 50%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      // border: 1px solid red;
      display: flex;
      flex-direction: column;
      .centertop-top {
        width: 100%;
        height: 110px;
        position: relative;

        .linecenter {
          position: absolute;
          top: 50%;
          transform: translateY(-50%) translateX(-50%);
        }
        .one {
          left: 27%;
        }
        .two {
          left: 51%;
          letter-spacing: 27px;
        }
        .three {
          left: 70.4%;
          letter-spacing: 25px;
        }
        .four {
          left: 79%;
        }
      }
      .centertop-center {
        height: 70px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          span {
            color: #fff;
            font-size: 14px;
            font-weight: 400;
          }
        }
      }
      .centertop-bottom {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 25px;

        .item {
          width: 50%;
          text-align: center;
          .itemflex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 100px 0 60px;
          }
        }
      }
    }
    .centerbottom {
      flex: auto;
      // border: 1px solid #fff;
      background-image: url("@/assets/images/jstzk-tz-bottom.png");
      background-position: 50% 50%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .bottomtop {
        width: 100%;
        height: 12%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.jsbody {
  height: 100%;
  padding: 10px 20px 20px 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  .left {
    width: 22%;
    height: 100%;
    background-image: url("@/assets/images/indexbg1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 50% 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    .itemtop {
      height: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      #echarts3 {
        width: 100%;
        flex: 1;
      }
    }
    .itembottom {
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      #echarts4 {
        width: 100%;
        flex: 1;
      }
    }
  }
  .center {
    width: 56%;
    height: 100%;
    // border: 1px solid red;
    display: flex;
    flex-direction: column;
    gap: 10px;
    .centertop {
      min-height: 28%;
      display: flex;
      justify-content: space-around;
      .item {
        width: 24%;
        height: 100%;

        background-position: 50% 50%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 3%;
        position: relative;
        .bottom {
          position: absolute;
          bottom: 10%;
        }
      }
    }
    .bg1 {
      background-image: url("@/assets/images/jstzk-left.png");
    }
    .bg2 {
      background-image: url("@/assets/images/jstzk-right.png");
    }
    .centerbottom {
      flex: 1;
      background-image: url("@/assets/images/jstzk-js-bottom.png");
      background-position: 50% 50%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      box-sizing: border-box;
    }
  }
  .right {
    width: 22%;
    height: 100%;
    background-image: url("@/assets/images/indexbg1.png");
    background-position: 50% 50%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: top;
    gap: 20px;
    box-sizing: border-box;
  }
}
.timeandtq {
  position: absolute;
  top: 75px;
}
:deep(.el-input__wrapper) {
  background-color: #04072f;
  border: 1px solid #04072f !important;
  box-shadow: none !important;
  .el-input__prefix {
    color: #fff;
  }
  .el-input__inner {
    color: #fff;
  }
}
</style>
